@media screen and (max-width: 767.98px) {

    .layui-logo,
    .layui-side {
        display: none;
    }

    .layui-body,
    .layui-footer {
        left: 0 !important;
    }

    .layui-layout-left {
        left: 0;
    }
}

@media screen and (min-width: 767.98px) {

    .layui-logo,
    .layui-side {
        display: block;
    }

    .layui-layout-left,
    .layui-body,
    .layui-footer {
        left: 200px;
    }

}

.layui-logo {
    padding: 0.7em;
    box-sizing: border-box;
    line-height: normal !important;
}

.layui-footer {
    /* height: 200px !important; */
    line-height: normal !important;
    padding: 15px !important;
    box-sizing: content-box;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.layui-footer>form {
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.layui-body {
    margin-bottom: 30px !important;
}

.layui-body>div {
    height: 100%;
    box-sizing: border-box;
}

@media screen and (min-width: 767.98px) {
    .layui-body>div {
        padding: 15px;

    }

}

@media screen and (max-width: 767.98px) {
    .msg-user .content, .msg-mine .content {
        max-width: 255px !important;
    }
}

.layui-body>div .layui-panel {
    height: 100%;
    box-sizing: border-box;
    overflow-y: hidden;
}

.layui-body {
    position: relative;
}

.layui-body>div .layui-card-body {
    height: 100%;
    box-sizing: border-box;
    overflow: auto;
    padding-bottom: 50px;
}

.layui-footer textarea {
    width: 100%;
    height: 38px;
    box-sizing: border-box;
    border: none;
    resize: none;
    padding: 8px;
}

.side-li {
    display: flex !important;
    justify-content: flex-start;
    overflow: hidden;
    box-sizing: border-box;
    height: 60px !important;
}

.side-li .side-li-img {
    width: 35%;
}

.side-li .side-li-img img {
    max-height: 100%;
    max-width: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.side-li>.side-li-span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: normal !important;
    padding-left: 10px;
    width: 65%;
    overflow: hidden;
}

.side-li>.side-li-span span {
    color: rgba(255, 255, 255, .7);

}

.message {
    width: 100%;
    box-sizing: border-box;
}

.msg-user, .msg-mine {
    display: flex;
    max-width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
    flex-direction: row;
    margin-bottom: 10px;
}

.msg-user {
    justify-content: flex-start;
}

.msg-mine {
    justify-content: flex-end;
}

.msg-user .head-portrait, .msg-mine .head-portrait {
    width: 25px;
    box-sizing: border-box;
    min-width: 25px;
}

.msg-user .head-portrait img, .msg-mine .head-portrait img {
    width: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.msg-user .content, .msg-mine .content {
    padding: 15px;
    max-width: 100%; 
    margin: 10px 5px;
    box-shadow: 0px 0px 5px #e2e2e2;
}

.layui-layer {
    max-width: 100% !important;
    max-height: 100% !important;
}

.msg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.more-btn {
    margin-top: 10px;
    opacity: 0;
}

.message li:hover .more-btn {
    opacity: 1;
}